<template>
  <div ref="chartRef" style="width:100%;height:100%;min-height:300px"></div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
import systemData from '@/data/systemRatioData.json'

const chartRef = ref()
let chart
let resizeTimer = null

// 提前计算数据总和，避免占比显示NaN
const totalValue = systemData.data.reduce((sum, item) => sum + (item.value || 0), 0)

const handleResize = () => {
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    if (chart) chart.resize()
  }, 300)
}

// 调整配色：将第1位（收费系统）改为粉色，其他颜色保持原对比度
const COLORS = [
  '#00eaff',    // 收费系统（蓝色）
  '#722ed1',    // 通信系统（深紫）
  '#ff4d4f',    // 监控系统（红色）
  '#faad14',    // 供电系统（金色）
  '#52c41a',    // 运行系统（绿色）
]

const getChartOption = () => {
  // 区分设备类型（这里简化判断，实际可结合 UA 或屏幕宽度更精准判断）
  const isMobile = window.innerWidth < 768; 
  return {
    title: { 
      text: systemData.title || '系统占比', 
      textStyle: { 
        color: '#00eaff', 
        fontSize: isMobile ? 14 : 16, 
        fontWeight: 'bold',
      }, 
      left: 'center',
      top: isMobile ? 5 : 10
    },
    legend: {
      data: systemData.data.map(item => item.name),
      bottom: isMobile ? 0 : 20,
      left: 'center',
      itemWidth: isMobile ? 10 : 12,
      itemHeight: isMobile ? 10 : 12,
      textStyle: {
        color: '#e0e0e0',
        fontSize: isMobile ? 10 : 12,
        // 图例自动换行（结合宽度限制）
        width: isMobile ? 60 : 'auto',
        overflow: 'break'
      },
      // 手机端图例换行显示，避免横向溢出
      type: 'scroll', 
      pageButtonItemGap: 5,
      pageButtonPosition: 'end'
    },
    tooltip: { 
      trigger: 'item',
      backgroundColor: 'rgba(15, 23, 42, 0.9)',
      borderColor: '#00eaff',
      borderWidth: 1,
      textStyle: { color: '#fff' },
      padding: 10,
      formatter: (params) => {
        if (!params.value || totalValue === 0) {
          return `${params.name}<br/>数值：${params.value || 0}<br/>占比：0%`
        }
        const percent = ((params.value / totalValue) * 100).toFixed(1)
        return `${params.name}<br/>数值：${params.value}<br/>占比：${percent}%`
      }
    },
    series: [{
      type: 'pie',
      radius: ['40%', '60%'],
      center: ['50%', '45%'],
      data: systemData.data,
      color: COLORS, 
      itemStyle: {
        borderColor: 'rgba(15, 23, 42, 0.8)',
        borderWidth: 2
      },
      label: {
        show: true,
        color: '#fff',
        fontSize: isMobile ? 10 : 12,
        formatter: (params) => {
          const percent = totalValue ? ((params.value / totalValue) * 100).toFixed(1) : 0
          return `${params.name}\n${percent}%`
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 234, 255, 0.5)'
        }
      }
    }]
  }
}

onMounted(() => {
  chart = echarts.init(chartRef.value)
  chart.setOption(getChartOption())
  window.addEventListener('resize', handleResize)
})

// 监听窗口变化，动态更新配置（可选，增强响应式）
watch(() => window.innerWidth, () => {
  if (chart) {
    chart.setOption(getChartOption())
  }
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  clearTimeout(resizeTimer)
  chart?.dispose()
})
</script>